<template>
  <div id="container" class="box">
    <div id="cesiumContainer">
        <div class="modelMenu">
            <div v-for="(item,index) in modelList" :key='index' class="modelItem" @click="changeModels(item.url)">
                {{item.title}}
            </div>
        </div>
        <button @click="show">轨迹</button>
    </div>
  </div>
</template>

<script>

export default {
  name: "models",
  data() {
    return {
      url: "http://localhost:3000/models/CesiumAir/Cesium_Air.glb",
      modelList : [
          {
              title : 'CesiumAir',
              url : 'http://localhost:3000/models/CesiumAir/Cesium_Air.glb'
          },
          {
              title : 'CesiumBalloon',
              url : 'http://localhost:3000/models/CesiumBalloon/CesiumBalloon.glb'
          },
          {
              title : 'CesiumMan',
              url : 'http://localhost:3000/models/CesiumMan/Cesium_Man.glb'
          },
          {
              title : 'CesiumMilkTruck',
              url : 'http://localhost:3000/models/CesiumMilkTruck/CesiumMilkTruck.glb'
          },
          {
              title : 'GroundVehicle',
              url : 'http://localhost:3000/models/GroundVehicle/GroundVehicle.glb'
          },
          {
              title : 'Pawns',
              url : 'http://localhost:3000/models/Pawns/Pawns.glb'
          },
          {
              title : 'ShadowTester',
              url : 'http://localhost:3000/models/ShadowTester/Shadow_Tester.glb'
          },
          {
              title : 'WoodTower',
              url : 'http://localhost:3000/models/WoodTower/Wood_Tower.glb'
          },
          
      ],
      Cesium : '',
      viewer : '',
      czml:[],
      dataSourcePromise:'',
      i:'',
      a:'',



    };
  },
  mounted() {
    
    this.Cesium = this.cesium;
    this.viewer = new this.Cesium.Viewer("cesiumContainer", {
        infoBox: false,
        selectionIndicator: false,
        shadows: true,
        shouldAnimate: true,
         imageryProvider : new this.Cesium.UrlTemplateImageryProvider({
     url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
   // url:"http://localhost:3000/odm_orthophoto_titles/odm_orthophoto.original/{z}/{x}/{y}.png"
     })
    });

    this.czml = [{
            "id": "document",
            "name": "polygon",
            "version": "1.0",
            "clock": {
                "interval": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                "currentTime": "2012-08-04T10:00:00Z",
                "multiplier": 10
            }
        }, {
            "id": "shape2",
            "name": "Red box with black outline",
            "availability": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
            "box": {
                "dimensions": {
                    "cartesian": [30.0, 30.0]
                },
                "material": {
                    "stripe": {
                        "orientation": "VERTICAL",
                        "evenColor": {
                            "rgba": [10, 211, 250, 0]
                        },
                        "oddColor": {
                            "rgba": [10, 211, 250, 255]
                        },
                        "offset": {
                            "number": 1
                        },
                        "repeat": 0.5
                    }
                },
            },
            "path": {
                "material": {
                    "solidColor": {
                        "color": {
                            "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
                            "rgba": [255, 255, 255, 128]
                        }
                    }
                },
                "width": [{
                    "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
                    "number": 3.0
                }],
                "show": [{
                    "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
                    "boolean": true
                }]
            },
            "position": {
                "interpolationAlgorithm": "LAGRANGE",
                "interpolationDegree": 1,
                "epoch": "2012-08-04T16:00:00Z",
                "cartographicDegrees": [
                    0.0, 118.87841653400005, 30.95679870500004, 0.0,
                    10.0, 118.87826541800007, 30.95680770900003, 0.0,
                    20.0, 118.8774481050001, 30.956860625000047, 0.0,
                    30.0, 118.87660414600009, 30.956910105000077, 0.0,
                   
                ]
            }
        }];



    this.init();
    
  },
  methods: {
    changeModels(url){
        this.url = url
        this.init()
    },
    init() {
      let Cesium = this.Cesium;
      var viewer = this.viewer
      //地图源换成高德
      
      this.createModel(this.url, 10000, viewer, Cesium);

      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
    createModel(url, height, viewer, Cesium) {
      viewer.entities.removeAll();
      var position = Cesium.Cartesian3.fromDegrees(119.36978014013846, 32.36050917346674,height);
      var heading = Cesium.Math.toRadians(135);
      var pitch = 0;
      var roll = 0;
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );
      var entity = viewer.entities.add({
        name: url,
        position: position,
        orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      });
      viewer.trackedEntity = entity;
     // viewer.carema.lookAt(entity)
    },
    show(){
        let Cesium =this.Cesium
        let viewer=this.viewer
        let czml=this.czml
        var dataSourcePromise
        var i=30;
        var a=410;
        setInterval(function() {
        i += 0.001;
        a += 10;
        
        czml[1].position.cartographicDegrees.push(a, 118.813667, i, 0);
    }, 10000);
        dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
    }
  },
};
</script>

<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.modelMenu{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    text-align: center;
    height: 500px;
    z-index: 99;
    color: aqua;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
}

.modelItem{
    cursor: pointer;
}
</style>
